import { VNode } from 'vue';

// 属性对应渲染的组件
export interface IPropToForm {
	component: string; // 组件
	subComponent?: string; // 子组件
	valueProp?: string; // 组件的属性
	styleProps?: { [key: string]: any }; // 原生的样式
	options?: { text: string; vNode?: VNode; value: any }[]; // 子组件内部
	name: string; // 名称
	eventName?: string; // 事件名称
	extraProps?: { [key: string]: any }; // 组件的属性
	beforeAdaptiveform?: (v: any) => any; // 展示之前转换
	afterAdaptiveform?: (v: any) => any; // 录入之后转换
}

/**
 * 每一个属性加上对应的组件如:
 * 	text:{
 *		name:"文本"，
 *	  component:"el-input",
 *    ...
 * 	}
 */
export type IPropsToForms = {
	[key: string]: IPropToForm;
};

interface IOptions {
	text: string;
	value: any;
	vNode?: VNode;
}

// 字体
const fontFamilyArr: IOptions[] = [
	{ text: '宋体', value: '"SimSun","STSong"' },
	{ text: '黑体', value: '"SimHei","STHeiti"' },
	{ text: '楷体', value: '"KaiTi","STKaiti"' },
	{ text: '仿宋', value: '"FangSong","STFangsong"' },
	{ text: 'Arial', value: '"Arial", sans-serif' },
	{ text: 'Arial Black', value: '"Arial Black", sans-serif' },
	{ text: 'Comic Sans MS', value: '"Comic Sans MS"' },
	{ text: 'Courier New', value: '"Courier New", monospace' },
	{ text: 'Georgia', value: '"Georgia", serif' },
	{ text: 'Times New Roman', value: '"Times New Roman", serif' },
];

// 对齐
let textAlignArr: IOptions[] = [
	{ text: '左', value: 'left' },
	{ text: '中', value: 'center' },
	{ text: '右', value: 'right' },
];
// 对齐映射
let textAlignMap = {
	kMap: {},
	vMap: {},
};
textAlignArr.forEach(item => {
	textAlignMap['kMap'][item.value] = item.text;
	textAlignMap['vMap'][item.text] = item.value;
});
// 字体VNode展示
const fontFamilyOptions = fontFamilyArr.map(font => {
	return {
		value: font.value,
		text: font.text,
		vNode: (<span style={{ fontFamily: font.value }}>{font.text}</span>) as VNode,
	};
});

const numberToPxHandle = {
	component: 'el-input-number',
	beforeAdaptiveform: (v: string) => (v ? parseInt(v) : 0),
	afterAdaptiveform: (e: number) => (e ? `${e}px` : '0'),
};

let pickerMap = {
	color: 'rgba(255, 69, 0, 0.68)',
	'show-alpha': true,
	predefine: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577'],
};

// 属性组件对应关系
export const mapPropsToForms: IPropsToForms = {
	// 文字
	text: {
		name: '文本',
		component: 'el-input',
		eventName: 'input',
		extraProps: {
			type: 'textarea',
			placeholder: '请输入',
			rows: 3,
			autosize: {
				minRows: 3,
				maxRows: 3,
			},
		},
	},
	fontSize: {
		name: '字号',
		...numberToPxHandle,
		extraProps: {
			placeholder: '请输入',
			min: 6,
			max: 50,
		},
	},
	fontFamily: {
		name: '字体',
		component: 'el-select',
		subComponent: 'el-option',
		extraProps: {
			placeholder: '请选择',
		},
		options: [{ text: '默认', value: '' }, ...fontFamilyOptions],
	},
	lineHeight: {
		name: '行高',
		component: 'el-slider',
		eventName: 'input',
		beforeAdaptiveform: (v: any) => (v ? parseInt(v) : 0),
		extraProps: {
			min: 0,
			max: 3,
			step: 0.1,
		},
	},
	textAlign: {
		name: '对齐',
		component: 'el-radio-group',
		subComponent: 'el-radio-button',
		options: textAlignArr,
		beforeAdaptiveform: (v: any) => textAlignMap['kMap'][v],
		afterAdaptiveform: (v: any) => textAlignMap['vMap'][v],
	},
	color: {
		name: '文字颜色',
		component: 'el-color-picker',
		extraProps: pickerMap,
	},
	fontWeight: {
		component: 'icon-switch',
		valueProp: 'checked',
		name: '加粗',
		beforeAdaptiveform: (v: string) => v === 'bold',
		afterAdaptiveform: (e: boolean) => (e ? 'bold' : 'normal'),
		extraProps: { iconName: 'jiacu', tip: '加粗' },
	},
	fontStyle: {
		component: 'icon-switch',
		valueProp: 'checked',
		name: '斜体',
		beforeAdaptiveform: (v: string) => v === 'italic',
		afterAdaptiveform: (e: boolean) => (e ? 'italic' : 'normal'),
		extraProps: { iconName: 'xieti', tip: '斜体' },
	},
	textDecoration: {
		component: 'icon-switch',
		valueProp: 'checked',
		name: '下划线',
		beforeAdaptiveform: (v: string) => v === 'underline',
		afterAdaptiveform: (e: boolean) => (e ? 'underline' : 'none'),
		extraProps: { iconName: 'xiahuaxian', tip: '下划线' },
	},
	// 背景
	backgroundColor: {
		name: '背景颜色',
		component: 'el-color-picker',
		extraProps: pickerMap,
	},
	imageSrc: {
		name: '图片',
		valueProp: 'imageSrc',
		eventName: 'onChangeImage',
		component: 'image-processer',
	},
	backgroundImage: {
		name: '图片',
		valueProp: 'imageSrc',
		eventName: 'onChangeImage',
		component: 'background-processer',
	},
	backgroundSize: {
		name: '背景大小',
		component: 'el-select',
		subComponent: 'el-option',
		extraProps: {
			placeholder: '请选择',
		},
		options: [
			{ value: '', text: '默认' },
			{ value: 'contain', text: '自动缩放' },
			{ value: 'cover', text: '自动填充' },
		],
	},
	backgroundRepeat: {
		name: '背景重复',
		component: 'el-select',
		subComponent: 'el-option',
		extraProps: {
			placeholder: '请选择',
		},
		options: [
			{ value: 'no-repeat', text: '无重复' },
			{ value: 'repeat-x', text: 'X轴重复' },
			{ value: 'repeat-y', text: 'Y轴重复' },
			{ value: 'repeat', text: '全部重复' },
		],
	},
	// sizes
	height: {
		name: '高度',
		...numberToPxHandle,
	},
	width: {
		name: '宽度',
		...numberToPxHandle,
	},
	paddingLeft: {
		name: '左边距',
		...numberToPxHandle,
	},
	paddingRight: {
		name: '右边距',
		...numberToPxHandle,
	},
	paddingTop: {
		name: '上边距',
		...numberToPxHandle,
	},
	paddingBottom: {
		name: '下边距',
		...numberToPxHandle,
	},
	// border types
	borderStyle: {
		name: '边框类型',
		component: 'el-select',
		subComponent: 'el-option',
		options: [
			{ value: 'none', text: '无' },
			{ value: 'solid', text: '实线' },
			{ value: 'dashed', text: '破折线' },
			{ value: 'dotted', text: '点状线' },
		],
	},
	borderColor: {
		name: '边框颜色',
		component: 'el-color-picker',
		extraProps: pickerMap,
	},
	borderWidth: {
		component: 'el-slider',
		eventName: 'input',
		name: '边框宽度',
		beforeAdaptiveform: (v: string) => (v ? parseInt(v) : 0),
		afterAdaptiveform: (e: number) => (e ? `${e}px` : '0'),
		extraProps: { min: 0, max: 20 },
	},
	borderRadius: {
		component: 'el-slider',
		eventName: 'input',
		name: '边框圆角',
		beforeAdaptiveform: (v: string) => (v ? parseInt(v) : 0),
		afterAdaptiveform: (e: number) => (e ? `${e}px` : '0'),
		extraProps: { min: 0, max: 200 },
	},
	// shadow and opactiy
	opacity: {
		component: 'el-slider',
		name: '透明度',
		eventName: 'input',
		beforeAdaptiveform: (v: number) => {
			return v ? v * 100 : v;
		},
		afterAdaptiveform: (e: number) => e / 100,
		extraProps: { min: 0, max: 100, reverse: true },
	},
	// 定位
	position: {
		name: '定位',
		component: 'el-select',
		subComponent: 'el-option',
		options: [
			{ value: '', text: '默认' },
			{ value: 'absolute', text: '绝对定位' },
		],
	},
	left: {
		name: 'X轴坐标',
		...numberToPxHandle,
	},
	top: {
		name: 'Y轴坐标',
		...numberToPxHandle,
	},
	// actions
	actionType: {
		component: 'el-select',
		subComponent: 'el-option',
		name: '点击',
		options: [
			{ value: '', text: '无' },
			{ value: 'url', text: '跳转到 URL' },
		],
	},
	url: {
		name: '跳转链接',
		component: 'el-input',
		eventName: 'input',
		extraProps: {
			placeholder: '请输入跳转链接',
		},
	},
};
